<template>
  <svg :width="width" :height="height" :name="name">
    <use :href="`${prefix}${name}`" v-bind="attrs" />
  </svg>
</template>

<script setup lang="ts">
const props = defineProps<{
  prefix?: string
  name: string
  color?: string
  width: string
  height: string
}>()
const { prefix = "#icon-", name, color, width = "32px", height = "32px" } = props
const attrs: Record<string, string> = {}
if (color) attrs.fill = color
</script>

<style scoped></style>
